<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="view-frame">
        <div class="charts-group">
          <div v-for="(item,index) of barData" :key="index" class="chart-item">
            <div class="elec-trend">
              <div class="elec-trend-title">{{ item&&item.title?item.title:"暂无标题" }}</div>
            </div>
            <div class="bar-chart">
              <vechart :options="realOptions(item,baroptions)" />
            </div>
            <p>{{ item&&item.remark?item.remark:"-" }}节能{{ item&&item.percent?(item.percent).toFixed(2):'-' }}%，{{ item&&item.elec?(item.elec).toFixed(2):'-' }}kwh</p>
          </div>
          <div class="chart-item">
            <div class="elec-trend">
              <div class="elec-trend-title">{{ lineData&&lineData.title?lineData.title:"暂无标题" }}</div>
            </div>
            <div class="bar-chart">
              <vechart :options="realOptions(lineData,lineoptions)" />
            </div>
            <p>{{ lineData&&lineData.remark?lineData.remark:'-' }}节能{{ lineData&&lineData.percent?(lineData.percent).toFixed(2):'-' }}%，{{ lineData&&lineData.elec?(lineData.elec).toFixed(2):"-" }}kwh</p>
          </div>
          <div class="chart-item counter">
            <div class="countbox">
              <div class="text">工厂侧能耗异常捕捉次数</div>
              <div class="times">150次</div>
            </div>
          </div>
        </div>
        <div class="elec-trend ai">
          <div class="elec-trend-title">AI模型原理</div>
        </div>
        <div class="process">
          <div class="process-item">
            <span>工厂和动力系统历史数据</span>
            <div class="item-content">
              <div class="box">
                <span class="textCDA">数据集</span>
              </div>
            </div>
          </div>
          <div class="process-item process-item-two">
            <span>神经网络</span>
            <div class="item-content">
              <img src="~@assets/report/sjwl1.gif" alt="">
              <img src="~@assets/report/sjwl2.gif" alt="">
            </div>
          </div>
          <div class="process-item">
            <span>CDA转化效率</span>
            <div class="item-content">
              <img src="~@assets/report/quxian.png" alt="">

            </div>
          </div>
          <div class="process-item">
            <span>优化开机建议</span>
            <div class="item-content">
              <img src="~@assets/report/zykjjy1.gif" alt="">
            </div>
          </div>
          <div class="process-item">
            <span>推荐结果</span>
            <div class="item-content">
              <table border="1px solid aqua" border-collapse="collapse">
                <tr>
                  <td>CDA</td>
                  <td>负载率</td>
                  <td>压力上限</td>
                  <td>压力下限</td>
                </tr>
                <tr>
                  <td>1#</td>
                  <td>80%</td>
                  <td>7.4</td>
                  <td>7.6</td>
                </tr>
                <tr>
                  <td>2#</td>
                  <td>80%</td>
                  <td>7.4</td>
                  <td>7.6</td>
                </tr>
                <tr>
                  <td>3#</td>
                  <td>80%</td>
                  <td>7.4</td>
                  <td>7.6</td>
                </tr>
                <tr>
                  <td>4#</td>
                  <td>80%</td>
                  <td>7.4</td>
                  <td>7.6</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import baroptions from './json/baroption.json'
import lineoptions from './json/lineoption.json'
import data from './json/data.json'
import { mapState } from 'vuex'
export default {
  components: {
    MainTitle: () => import('@/components/MainTitle.vue'),
    vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // mainTitle: '智慧节能概览',
      chartTitle: '压缩空气转换效率（kwh/CMH）',
      baroptions: baroptions,
      lineoptions: lineoptions,
      data: data,
      resultData: [],
      runFlag: false
    }
  },
  computed: {
    mainTitle() {
      return this.title
    },
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    }),
    barData() {
      const barData = []
      const barlist = this.data.slice(0, 3)
      barlist.forEach(e => {
        const i = this.resultData.find(i => i.type === e.type)
        if (i) {
          barData.push(i)
        }
      })

      return barData
    },
    lineData() {
      const linelist = this.data.slice(3, 4)[0]
      const i = this.resultData.find(i => i.type === linelist.type)
      return i
    }
  },
  created() {
    this.$nextTick(() => {
      this.getSavingEnergyOverview()
    })
  },
  methods: {
    realOptions(item, options) {
      return item ? { ...options, series: [{ ...options.series[0], data: item.before }, { ...options.series[1], data: item.after }], xAxis: { ...this.baroptions.xAxis, data: item.x }} : baroptions
    },
    async getSavingEnergyOverview() {
      try {
        this.runFlag = true
        // await this.sleep(1000)
        const result = await this.service.getSavingEnergyOverview()
        if (result && result.flag) {
          this.resultData = result.data
          console.log('traffic', result.data)
        }
        this.runFlag = false
      } catch (e) {
        this.runFlag = false
        this.$notify({
          title: '数据获取出错',
          type: 'error',
          duration: 2500
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.aaa{
  font-size: 1.6rem;
}
.mainbody{
  height: 100vh;
  background: url('~@assets/report/bg.png') no-repeat;
  background-size: 100% 100%;
}
.container{
  position: relative;
  width: 92%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame{
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  height: 90%;
  overflow-y:scroll;
  margin-top: 1rem;
  // 隐藏滚动条
  &::-webkit-scrollbar {// 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {// 兼容Opera
    display: none;
  }
  scrollbar-width: none;// 兼容Firefox
  -ms-overflow-style: none;// 兼容edge
}
.charts-group{
  display: flex;
  flex-basis: 70%;
  flex-flow: row wrap;
}
.chart-item{
  flex-basis: 50%;
  height: 48%;
  min-height: 25rem;
  display: flex;
  flex-flow: column;
}
.elec-trend{
  width: 100%;
  display: flex;
  flex-basis: 10%;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
}
.elec-trend.ai{
  flex-basis: 4%;
}
.elec-trend-title{
  font-size: 1.3rem;
  // font-style: italic;
  font-weight: 600;
  line-height: 3rem;
}
.bar-chart{
  height: 80%;
  flex:1;
}
.chart-item>p{
  text-align: center;
  color: #00f4ff ;
  font-weight: 600;
  font-size: 1.3rem;
}
.chart-item.counter{
  background: url('~@assets/report/counterbg.gif') no-repeat;
  background-size: 100% 100%;
  min-height: 18rem;
}
.countbox{
  width: 50%;
  height: 60%;
  margin-left: 5%;
  margin-top: 5%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.text{
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  width: 34%;
  margin-left: 1rem;
}
.times{
  text-align: center;
  font-size: 2.2rem;
  font-weight: 600;
  color: #00f4ff;
}
.loading{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
.process{
  margin-top: 1rem;
  width: 100%;
  display: flex;
  flex-basis: 30%;
}
.process-item{
  flex-basis:16.6%;
  text-align: center;
}
.process-item.process-item-two{
  flex-basis:33.3%;
}
.process-item>span{
  display: inline-block;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  padding: 0 0.7rem;
  border: 1px solid #ccc;
  background: rgb(11, 28, 74);
}
.item-content{
  width: 100%;
  border: 1px dashed #ccc;
  margin-top: -1.5rem;
  padding-top: 1rem;
  height: 83%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.item-content img{
  height: 75%;
}
.box{
  width: 65%;
  height: 70%;
  margin: 1.5rem auto 2.5rem;
  background: url('~@assets/report/sjjbg.png') no-repeat center center;
  background-size: 100% auto;
  padding: 5.5rem 0;
}
.box>span{
  display: block;
  font-size: 2rem;
  font-weight: 600;
  line-height: 3rem;
  color: aqua;
  text-align: center;
}
.box>span.textCDA{
  font-size: 2.8rem;

}
.process table{
  border-collapse:collapse;
}
.process table,.process td
{
    border: 1px solid aqua;
    padding: 1rem 0.7rem;
}
</style>
